<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>employee的相关数据显示</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<div class="layui-container">
    <div class="layui-progress" style="margin: 15px 0 30px;">
        <div class="layui-progress-bar" lay-percent="100%"></div>
    </div>
    <!--    一些小提示-->
    <blockquote class="layui-elem-quote" style="margin-top: 30px;">
        <div class="layui-text">
            <ul>
                <li>你当前的功能是：<span>模拟查询所有员工信息<span id="version"></span></span></li>
                <li>接口地址：/restful/employee/</li>
            </ul>
        </div>
    </blockquote>

    <!--    布局内容-->
    <div class="layui-btn-container" id="app">
        <!--        列表-->
        <table class="layui-table">
            <button type="button" class="layui-btn layui-btn-fluid">
                <a th:href="@{/restful/employee/add}">点击添加员工信息</a>
            </button>

            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>id</th>
                <th>lastName</th>
                <th>email</th>
                <th>gender</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="employee:${employees}">
                <td th:text="${employee.id}">余小小</td>
                <td th:text="${employee.lastName}">余小小</td>
                <td th:text="${employee.email}">余小小</td>
                <td th:text="${employee.gender}">余小小</td>
                <td>
<!--                    <button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">删除</button>-->

                    <a @click="deleteEmployee()" th:href="@{'/restful/employee/'+${employee.id}}">删除</a>
                    <!--                    需要先传入当前id，得到dao中的对象-->
                    <a th:href="@{'/restful/employee/'+${employee.id}}">更新</a>
                </td>
            </tr>
            </tbody>
        </table>

        <form method="post">
            <!--        发送delete请求 -->
            <input type="hidden" name="_method" value="delete">
        </form>
    </div>

</div>
<!-- 引入JS文件 -->
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/vue/vue.js}"></script>

<script type="text/javascript">

    var vue = new Vue({
        el: '#app',
        methods: {
            deleteEmployee() {
                //得到form表单的dom对象
                var form = document.getElementsByTagName("form")[0]
                //     将超链接的href属性赋值给form表单 target当前的目标对象
                form.action = event.target.href;
                //     提交表单
                form.submit();
                //     阻止a标签默认行为
                event.preventDefault();
            }
        }
    });
</script>



<script>
    layui.use(function(){
        var layer = layui.layer;
        var util = layui.util;
        // 事件
        util.on('lay-on', {
            "test-confirm": function(){
                layer.confirm('你是否要删除', {icon: 3}, function(){
                    layer.msg('点击确定的回调', {icon: 1});
                }, function(){
                    // layer.msg('点击取消的回调');
                });
            }
        })
    });
</script>

</body>
</html>